<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="vue.js"></script>

</head>
<body>
<div id="app" class="col-lg-8 col-sm-offset-2" style="margin-top: 50px">
    <div>
        <form action="" method="post" class="form-inline">
            <p>姓名：<input type="text" class="form-control" placeholder="姓名" v-model="username"></p>
            <p>年龄：<input type="text" class="form-control" placeholder="年龄" v-model="age"></p>
            <p><input type="button" class="btn btn-primary" style="width: 240px" value="添加" @click="add"></p>
        </form>
    </div>
    <div>
        <table class="table table-bordered table-hover">
            <tr v-for="(item,index) in list">
                <td class="col-sm-1">{{index + 1}}：</td>
                <td class="col-sm-3"> {{item.username}}</td>
                <td class="col-sm-3">{{item.age}}</td>
                <td class="col-sm-5"><input type="button" class="btn btn-primary" value="删除" @click="del(index)">
                    &nbsp;<input type="button" class="btn btn-primary" value="修改" @click="edit(index)"></td>
            </tr>
        </table>
    </div>

    <div class="panel panel-primart col-sm-6 col-sm-offset-4" v-show="show">
        <!--<div class="panel-heading">Panel heading without title</div>-->
        <div class="panel-body">
            <p>姓名：<input type="text" placeholder="姓名" v-model="e_username"></p>
            <p>年龄：<input type="text" placeholder="年龄" v-model="e_age"></p>
            <p><input type="button" class="btn btn-sm btn-primary" value="修改" @click="save">
                <input type="button" class="btn btn-sm btn-primary" style="margin-left: 120px" value="取消" @click="cancel"></p>

        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                username: '',
                age: '',
                list: [],
                show: false,
                e_username: '',
                e_age: '',
            },
            methods: {
                add: function () {
                    this.list.push({username: this.username, age: this.age})
                },
                del: function (index) {
                    this.list.splice(index, 1)
                },
                edit: function (index) {
                    this.show = true;
                    this.n = index;
                    this.e_username = this.list[index].username;
                    this.e_age = this.list[index].add
                },
                save: function () {
                    this.list[this.n].username = this.e_username,
                        this.list[this.n].age = this.e_age,
                        this.show = false
                },

                cancel: function () {
                    this.show = false
                }

            },
        })

    </script>
</body>
</html>